<!--查询所有题库-->
<template>
  <div class="exam">
    <div class="wrapper">
      <ul class="top">
        <li class="search-li">
          <el-select style="width: 200px;margin: 0 5px;" v-model="Qtype" placeholder="题目类型" filterable clearable>
                <el-option label="选择题" value="选择题"></el-option>
                <el-option label="填空题" value="填空题"></el-option>
                <el-option label="判断题" value="判断题"></el-option>
          </el-select>
        </li>
        <li class="search-li">
          <div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"></div>
        </li>
        <li><el-button type="warning" @click="search()">搜索</el-button></li>
      </ul>
    </div>
    <el-table :data="pagination.records" border :row-class-name="tableRowClassName" stripe fit class="center-content">
      <el-table-column fixed="left" prop="subject" label="试卷名称" width="250"></el-table-column>
      <el-table-column prop="question" label="题目信息"  :span="12"></el-table-column>
      <el-table-column prop="type" label="题目类型" width="230"></el-table-column>
      <el-table-column prop="score" label="试题分数" width="160"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.current" :page-sizes="[6, 10]" :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" class="page"></el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pagination: {
          //分页后的考试信息
          current: 1, //当前页
          total: null, //记录条数
          size: 6, //每页条数
        },
        key: '', //搜索关键字
        Qtype:''
      };
    },
    created() {
      this.getAnswerInfo();
    },
    methods: {

      //搜索试卷
      search() {
        this.$axios('/api/answers/1/1000').then(res => {
          if (res.data.code === 200) {
            
            let allExam = res.data.data.records
            let newPage = allExam.filter(item => {
              return item.type.includes(this.Qtype)
            }).filter(item => {
              return item.subject.includes(this.key)
            })
            console.log(newPage);
            var startIndex = (this.pagination.current - 1) * this.pagination.size;
            var endIndex = startIndex + this.pagination.size;
            this.pagination.records = newPage.slice(startIndex, endIndex)
            this.pagination.total = newPage.length
          }
        })
      },

      getAnswerInfo() {
        //分页查询所有试卷信息
        this.$axios(
          `/api/answers/${this.pagination.current}/${this.pagination.size}`
        )
          .then(res => {
            this.pagination = res.data.data;
            console.log(res);
          })
          .catch(error => { });
      },
      //改变当前记录条数
      handleSizeChange(val) {
        this.pagination.size = val;
        this.search();
      },
      //改变当前页码，重新发送请求
      handleCurrentChange(val) {
        this.pagination.current = val;
        this.search();
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return "warning-row";
        } else {
          return "success-row";
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  .exam {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }

    .el-table tr {
      background-color: #DD5862 !important;
    }
  }

  .el-table .warning-row {
    background: #000 !important;

  }

  .el-table .success-row {
    background: #DD5862;
  }


  .top {

    display: flex;
    justify-content: center;
  }

  .wrapper .top .order {
    cursor: pointer;
  }

  .wrapper .top .order:hover {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .wrapper .top .order:visited {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .item .info i {
    margin-right: 5px;
    color: #0195ff;
  }

  .item .info span {
    margin-right: 14px;
  }

 .center-content .el-table__body-wrapper td .cell {
  text-align: center;
}
  .paper .item {
    width: 380px;
    border-radius: 4px;
    padding: 20px 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
    transition: all 0.6s ease;
  }

  .paper .item:hover {
    box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
    transform: scale(1.03);
  }

  .paper .item .info {
    font-size: 14px;
    color: #88949b;
  }

  .paper .item .name {
    font-size: 14px;
    color: #88949b;
  }

  .paper * {
    margin: 20px 0;
  }

  .wrapper .paper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
 

  .top .el-icon-search {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .top .icon {
    position: relative;
  }

  .wrapper .top {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .search-li {
    margin-left: auto;
  }

  .top .search-li {
    margin-left: auto;
  }

  .top li {
    display: flex;
    align-items: center;
  }

  .top .search {
    margin-left: auto;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .top .search:hover {
    color: #0195ff;
    border-color: #0195ff;
  }

  .wrapper .top {
    display: flex;
  }

  .wrapper .top li {
    margin: 20px;
  }



</style>